<?xml version="1.0"?>

<!DOCTYPE html>
<html lang="en-US">
<head>
	<script src="../deps/jquery-1.7.1.js"></script>
	<script src="../deps/raphael-min.js"></script>
  	<link rel="stylesheet" href="qunit.css" type="text/css" media="screen" />
	<script type="text/javascript" src="qunit.js"></script>
	<script type="text/javascript" src="../rm.js"></script>
<title>Raphael markup test 1</title>
</head>
<body>
<p>This html document contains inside an embedded &lt;raphael> document
<!-- and now the raphael document -->

<raphael>
	
	<paper x="10" y="10" width="400" height="400">
		<rect x="20" y="30" width="100" height="200"></rect>
		<rect x="200" y="30" width="100" height="200"></rect>
		<circle cx="20" cy="300" radius="20" stroke="red"></circle>
		
		<set class="set1">
			<circle cx="220" cy="300" radius="40" stroke="red"></circle>
			<rect x="333" y="130" width="20" height="40"></rect>
			<ellipse x="333" y="330" rx="20" ry="40"></ellipse>
		</set>
	</paper>
	
	<style>
	
	paper * {
		opacity: 0.2
	}
	paper rect { 
 		fill: blue;  
 		stroke-width: 10  
 	} 
	.set1 {
		fill: yellow;
	}
 	.set1 circle { 
 		fill: black; 
 		stroke: red; 
 		stroke-width: 4; 
	} 
	
	
	</style>
</raphael>


 <h1 id="qunit-header">QUnit raphael markup tests</h1>
 <h2 id="qunit-banner"></h2>
 <div id="qunit-testrunner-toolbar"></div>
 <h2 id="qunit-userAgent"></h2>
 <ol id="qunit-tests"></ol>
 <div id="qunit-fixture">test markup, will be hidden</div>
 

<script type="text/javascript">

//some qunit testing
$(document).ready(function(){
	
module("mutation events using embedded markup");

test("parseRaphaelembeddedMarkup", function() {	
	var d = rm.render()[0];
	ok(d.find(".set1 circle").size()==1, "DOM1");
	var c1 = d.find(".set1 circle");
	c1.bind("DOMAttrModified", function(evt){
		var attrName = evt.attrName, newval = evt.newValue, 
			prevval = evt.prevValue;
		ok(attrName=="fill", "DOMAttrModifiedName");
		ok(newval=="pink", "DOMAttrModifiedNNewValue");
		ok(prevval=="black", "DOMAttrModifiedPrevValue");
	});
	c1.attr("fill", "pink");
	ok(c1.attr("fill")=="pink", "DOM2");
});




	
	rm.renderAjax("drawing1.xml", function(d) {
		module("mutation events using ajax markup");
		test("parseRaphaelembeddedMarkup", function() {	
		alert("hehe")
		ok(d.find(".set1 circle").size()==1, "DOM1");
		var c1 = d.find(".set1 circle");
		c1.bind("DOMAttrModified", function(evt){
			var attrName = evt.attrName, newval = evt.originalEvent.newValue, 
				prevval = evt.originalEvent.prevValue;
			ok(attrName=="fill", "DOMAttrModifiedName");
			ok(newval=="pink", "DOMAttrModifiedNNewValue");
			ok(prevval=="black", "DOMAttrModifiedPrevValue");
		});
		c1.attr("fill", "pink");
		ok(c1.attr("fill")=="pink", "DOM2");
		});
	});
		

});
</script>
</body>
</html>